<template>
  <a-layout>
    <a-layout>
      <a-layout-sider width="200" style="background: #fff">
        <a-menu
            mode="inline"
            :style="{ height: '100%', borderRight: 0 }">
          <a-sub-menu v-for="item in categories" :key="item.id" @click="handlerMenuClick(1,item.id)">
            <template v-slot:title>
              <span>
                <user-outlined/>
                <span>{{ item.name }}</span>
              </span>
            </template>
            <a-menu-item v-for="child in item.children" :key="child.id" @click.stop="handlerMenuClick(2,child.id)">
              <span>{{ child.name }}</span>
            </a-menu-item>
          </a-sub-menu>
        </a-menu>
      </a-layout-sider>
      <a-layout style="padding: 0 24px">
        <a-breadcrumb style="margin: 16px 0"></a-breadcrumb>
        <a-layout-content :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }">
          <a-list item-layout="vertical" size="large" :grid="{gutter:20,column:3}" :data-source="ebooks">
            <template #renderItem="{ item }">
              <a-list-item key="item.name">
                <template #actions>
                <span v-for="{ type, text } in actions" :key="type">
                  <component :is="type" style="margin-right: 8px"/>
                  {{ text }}
                </span>
                </template>
                <a-list-item-meta :description="item.description">
                  <template #title>
                    <a :href="item.href">{{ item.name }}</a>
                  </template>
                  <template #avatar>
                    <a-avatar :src="item.cover"/>
                  </template>
                </a-list-item-meta>
                {{ item.content }}
              </a-list-item>
            </template>
          </a-list>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-layout>
</template>

<script>

import {onMounted, reactive, ref,} from "vue";
import * as home from '@/api/home'

export default {
  name: 'Home',
  components: {},
  setup() {
    const categories = ref([])
    const actions = [{
      type: 'StarOutlined',
      text: '156',
    }, {
      type: 'LikeOutlined',
      text: '156',
    }, {
      type: 'MessageOutlined',
      text: '2',
    }];
    const current = ref(1)
    const size = ref(10)
    const total = ref(5)
    const ebooks = ref([])
    const category = ref(0)
    const types = ref(0)


    const handlerMenuInit = () => {
      home.categories().then(res => {
        if (res.success) {
          categories.value = res.data[0].children
          handlerMenuClick(1,categories.value[0].id)
        } else {
          message.error(res.msg);
        }
      })

    }

    /**
     * 菜单的点击事件
     */
    const handlerMenuClick = (types, categoryId) => {
      let params = {
        current: current.value,
        size: size.value,
        category: types === 1 ? categoryId : "",
        secondary: types === 2 ? categoryId : ""
      }
      home.wikis(params).then(res => {
        let result = res.data
        ebooks.value = result.records
        current.value = result.current
        size.value = result.size
        total.value = result.total
      });
    }

    onMounted(() => {
      handlerMenuInit()
    })


    const handlerPageChangerQuery = (params) => {
      handlerMenuClick(params)
    }

    return {
      actions,
      categories,
      ebooks,

      handlerMenuClick
    }
  }
}
</script>

<style>
.site-layout-background {
  background: #fff;
}

.ant-layout-content {
  min-height: 480px !important;
}

.ant-layout-footer {
  text-align: center;
}
</style>
